<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                height: 100px;
                float: left;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js">
        </script>
        <script>
            var num_of_links = "50"; //the maxinum of links returned from wiki
            var title_links = "";
            
            function searchWiki(){
                searchContent();
                searchLinks();
            }
            
            function searchContent(title){
            
                if (title == null || title == "") {
                    title = document.getElementById("query").value + "";
                    title_links = title;
                }
                
                var params = {
                    titles: title,
                    prop: "revisions",
                    rvprop: "content",
                    rvsection: "0"
                
                };
                
                $.getJSON("http://en.wikipedia.org/w/api.php?action=query&format=json&callback=?", params, wikipediaHTMLResult);
                
            }
            
            
            function searchLinks(){
                var params = {
                    titles: title_links,
                    prop: "extlinks",
                    ellimit: "50",
                    eloffset: "0"
                
                };
                
                $.getJSON("http://en.wikipedia.org/w/api.php?action=query&format=json&callback=?", params, wikipediaLinkResult);
                
            }
            
            function wikipediaHTMLResult(response){
                var title = isRedirect(response);
                
                //use new title to search again
                if (title != -1) {
                    searchContent(title);
                    title_links = title;
                    
                }
                else {
                
                    var rs = JSON.stringify(response);
                    document.getElementById("content").innerHTML = rs;
                }
                
            }
            
            
            function wikipediaLinkResult(response){
            
                //extract the external links
                var pages = response.query.pages;
                var keys = [];
                
                for (var k in pages) {
                    keys.push(k);
                }
                
                var pageid = keys[0];
                var extlinks = pages[pageid].extlinks;
                
                if (extlinks == undefined) {
                    // alert("no links/results");
                    return;
                }
                
                var links = [];
                for (var i = 0; i < extlinks.length; i++) {
                    var obj = extlinks[i];
                    for (var key in obj) {
                        var attrName = key;
                        var attrValue = obj[key];
                        links.push(attrValue);
                    }
                }
                
                //algorithem for links selection
                
                
                //display the links
                var htmlLinks = "";
                for (var i = 0; i < links.length; i++) {
                    var url = links[i];
                    htmlLinks += (i + 1) + " <a href='" + url + "'>" + url + "</a><br>";
                }
                document.getElementById("link").innerHTML = htmlLinks;
                
                
            }
            
            //whether the current response need to redirect
            //if yes, return the new title
            //if no, return -1
            function isRedirect(response){
                var rs = JSON.stringify(response);
                
                var pages = response.query.pages;
                var keys = [];
                
                for (var k in pages) {
                    keys.push(k);
                }
                
                var pageid = keys[0];
                var revisions = pages[pageid].revisions;
                
                var revStr = JSON.stringify(revisions);
                var index = revStr.indexOf("#REDIRECT");
                
                //no redirect
                if (index == -1) {
                    return -1;
                }
                
                else {
                    var left = revStr.indexOf("[[");
                    var right = revStr.indexOf("]]");
                    
                    var newTitle = revStr.substring(left + 2, right);
                    return newTitle;
                }
                
            }
            
            
            
            function wikipediaFirstPara(data){
            
                var rs = JSON.stringify(data);
                document.getElementById("content").innerHTML = rs;
                
                
                
            }
        </script>
    </head>
    <body>
        <div id="search">
            <input type="text" id="query"/>
            <br>
            <button onclick="searchWiki()">
                Search Wiki
            </button>
        </div>
        <div id="content">
        </div>
        <div id="link">
        </div>
    </body>
</html>
